<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>园园の定制首页</title>
    <link rel="icon" href="assets/img/title/Acerola.jpg" type="images/x-ico"/>
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/base.css">
    <link rel="stylesheet" href="styles/navi_page.css">
    <link rel="stylesheet" href="styles/site_modal.css">
    <link rel="stylesheet" href="styles/map_modal.css">
    <link rel="stylesheet" href="styles/notice_modal.css">
    <link rel="stylesheet" href="styles/album_page.css">
    <link rel="stylesheet" href="styles/anni_page.css">
</head>
<body>
<!-- 提示 message -->
<div class="message-box">
</div>

<!-- 导航页 part -->
<div class="navi-page">
    <nav>
        <div class="feature-part">
            <div class="feature">
                <button class="notice gauss scale" type="submit" title="查看通知 "><img src="./assets/img/notice.png">
                    <button class="todo gauss scale" type="submit" title="添加代办事件 ~"><img
                            src="./assets/img/schedule.png"></button>
                    <input class="todo-input gauss" type="text" placeholder="添加代办事件，写完按回车哦 ~"/>
                </button>
            </div>
            <div class="todo-list">
                <ul class="todo-list-ul">

                </ul>
            </div>
        </div>

        <div class="wish-part">
            <div class="wish">
                <input class="wish-input gauss" type="text" placeholder="许个小愿望，写完按回车哦"/>
                <button class="wish-button gauss scale" type="submit" title="点击许愿"><img
                        src="./assets/img/heart.png">
                </button>
            </div>
            <div class="wish-list">
                <div class="wish-tabs">
                    <div class="wishing-tab gauss active">实现 ing</div>
                    <div class="realize-tab gauss">完成啦</div>
                </div>
                <ul class="wish-list-ul">

                </ul>
            </div>
        </div>
    </nav>

    <header class="header">
        <div class="tab-bar">
            <div class="tab-bar-item"><img src="./assets/img/baidu.png" alt="百度"></div>
        </div>
        <form  class="search"  method="get" action="http://www.baidu.com/s">
            <input class="gauss" autocomplete="off" name="wd" type="text" required placeholder="百度一下,园园知道">
            <button class="gauss scale" type="submit"><img src="./assets/img/search.png"></button>
        </form>
    </header>

    <!-- notice modal -->
    <div class="notice-modal">
        <div class="notice-modal-body gauss">
            <a class="notice-modal-close">×</a>
            <span class="notice-modal-title">关于本站</span>
            <div class="notice-details">
                <span class="introduce">😀 站点介绍</span>
                <p class="intro-details">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    本站创立于 <strong>2022 年 06 月 20 日</strong>，一个傻乎乎也不懂浪漫的程序员能为他心爱的园园小朋友做些什么呢?
                    于是就有了这个 <strong>“我的园园小可爱”</strong> 👻。
                </p>
                <p class="intro-details">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <strong>园园</strong>,下面是我想对你说的,我对你绝非一见倾心,一开始你还只是会老老实实问题的张园园呢,后来我们敞开心扉,聊八卦,聊生活,聊未来,你我嘘寒问暖,
                    互相分享快乐,那时你我虽是朋友,却绝非一般朋友,而我也许早就动了歪脑筋,将园园视作最重要的人之一,当你告诉我想在我临走前见我的时候,你也许不知道
                    ,我的心在那时已经找到了他的归属。 心爱的女孩目送我离开,此行,我满载幸福而去,必将载满思念归来。
                </p>
                <p class="intro-details">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <strong>园园</strong>，我的人生刚上路,将来很长一段时间,依然会是一个不靠谱的家伙,但有了你,奋斗被赋予了更多的意义,我会加油的
                    🎉。

                </p>
                <p class="intro-details">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <strong>等我</strong></p>
                <span class="source"><svg class="icon"><img style="margin:0 auto" class="image" src="assets/heart.png"></svg></span>
            </div>
        </div>
    </div>


    <audio id="audio-wind" src="./assets/audio/wind_1s.mp3" preload="auto"></audio>
    <img class="windmill" src="./assets/img/windmill.png" title="切换背景图片 ~" loading="lazy">
</div>

<!-- 照片墙 part -->
<div class="album-page">
    <div class="album-nav gauss">让我看看是谁在偷看我女朋友的照片 🧐</div>

    <div class="album-swiper">
        <div class="album-item">

        </div>
    </div>
</div>

<!-- 纪念日 part -->
<div class="anni-page">
    <div class="content">
        <div class="code">
            <span class="comments">/**</span><br/>
            <span class="space"></span><span class="comments">* Form 2022—06-15,</span><br/>
            <span class="space"></span><span class="comments">* to now and continue.</span><br/>
            <span class="comments">**/</span><br/>
            The little brother = <span class="keyword">Mr.</span> Mo<br/>
            The little sisiter = <span class="keyword">Miss</span> Yuan<br/>
            <span class="comments">// Fall in love river. </span><br/>
            The boy loves the girl;<br/>
            <span class="comments">// They love each other.</span><br/>
            The girl loves the boy;<br/>
            <span class="comments">// AS time goes on.</span><br/>
            The boy can not be separated the girl;<br/>
            <span class="comments">// At the same time.</span><br/>
            The girl can not be separated the boy;<br/>
            <span class="comments">// Both wind and snow all over the sky.</span><br/>
            <span class="comments">// Whether on foot or 800 kilometers.</span><br/>
            <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br/>
            <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br/>
            <span class="comments">// Whether it is right now</span><br/>
            <span class="comments">// Still in the distant future.</span><br/>
            The boy has a dream;<br/>
            <span class="comments">// The boy wants the girl could well have been happy.</span><br/>
            <br>
            <br>
            <span class="space"></span>I want to say:<br/>
            <span class="space"></span>Baby, I love you forever;<br/>
        </div>
        <div class="love-heart">
            <canvas class="garden"></canvas>
            <div class="words">
                <div class="messages">
                    遇见你，是最美丽的意外。
                    <div class="elapseClock"></div>
                </div>
                <div class="loveu">
                    想你，情不自禁。<br/>
                    <div class="signature">- Mo</div>
                </div>
            </div>
        </div>
        <!-- BGM-->
        <audio id="audio-love" src="./assets/audio/锦零-恋爱画板.mp3" preload="auto"></audio>
    </div>
</div>

<div class="indicator">
    <ul title="滚动一下鼠标滑轮 ~ ">
        <li class="point active" data-index='0'></li>
        <li class="point" data-index='1'></li>
        <li class="point" data-index='2'></li>
    </ul>
</div>
<!--live2d-->
<!--<div id="live2d-widget" class="live2d-widget-container">-->
<!--    <canvas id="live2dcanvas" width="400" height="800"></canvas>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script>-->

<script type="text/javascript" src="//at.alicdn.com/t/font_1709463_hkvkjmjk02a.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
<script type="text/javascript" src="scripts/navi_page.js"></script>
<script type="text/javascript" src="scripts/notice_modal.js"></script>
<script type="text/javascript" src="scripts/album_page.js"></script>
<script type="text/javascript" src="scripts/anni_page.js"></script>
<script type="text/javascript" src="scripts/notice.js"></script>
<!--<script type="text/javascript" src="scripts/bgmChange.js"></script>-->
</body>
</html>
